<template>
  <el-descriptions :title="request.projectName" direction="vertical" :column="2" border>
    <el-descriptions-item label="名称">{{ request.projectName }}</el-descriptions-item>
    <el-descriptions-item label="编号">{{ request.projectNum }}</el-descriptions-item>
    <el-descriptions-item label="类型">{{ request.mapValue }}</el-descriptions-item>
    <el-descriptions-item label="状态">{{ request.mapValue }}</el-descriptions-item>
    <el-descriptions-item label="开始时间">{{ request.beginTime }}</el-descriptions-item>
    <el-descriptions-item label="结束时间">{{ request.overTime }}</el-descriptions-item>
    <el-descriptions-item label="创建人">{{ request.createdName }}</el-descriptions-item>
    <el-descriptions-item label="更新人">{{ request.updatedName }}</el-descriptions-item>
    <el-descriptions-item label="创建时间">{{ request.createdTime }}</el-descriptions-item>
    <el-descriptions-item label="更新时间">{{ request.updatedTime }}</el-descriptions-item>
    <el-descriptions-item label="产品描述">
      <markdown v-model="request.projectDescription" :previewOnly="true"></markdown>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
import { onBeforeMount, ref, toRefs, watch } from 'vue'
import { queryProjectDetailUrl } from '@/api/api'
import { post } from '@/utils/httpRequest'

export default {
  name: 'productDetail',
  setup (props) {
    const { id } = toRefs(props)
    const request = ref({})
    const queryProjectDetailAsync = async () => {
      const result = await post(queryProjectDetailUrl, { id: id.value })
      if (result.code === 200) {
        request.value = result.data
      }
    }
    watch(() => id, () => {
      queryProjectDetailAsync()
    })
    onBeforeMount(() => {
      queryProjectDetailAsync()
    })
    return {
      request
    }
  },
  props: {
    id: {
      type: Number,
      default: 0,
      required: true
    }
  }
}
</script>

<style scoped>

</style>
